<template>
  <div class="address_add">
    <div class="address_cnt">
      <div class="address_top flex">
        <p>姓名：</p>
        <input v-model="name" placeholder="请输入真实姓名">
      </div>
      <div class="address_top flex">
        <p>联系电话：</p>
        <input v-model="phone" placeholder="请输入您的手机号">
      </div>
      <div style="display: flex;flex-direction: row"></div>
      
      <div style="display: flex;flex-direction: row; margin:0.5rem 0;">
         <input type='text' style="background-color: #F3F3F3; width:1rem !import; padding: 0.5rem;" v-model="yzm" placeholder="请输入验证码">
         <div style="margin-left: 4rem; margin-top: 0.3rem">发送验证码</div>
      </div>
 
      <div class="address_top flex" @click="openMap">
        <div class="address_left flex">
          <p>所在地址：</p>
          <i class="iconfont icon-wxbdingwei"></i>
          <!-- <input v-model="address" placeholder="请点击选择" disabled="disabled"> -->
          <p class="address_main">{{address}}</p>
        </div>
        <i class="iconfont icon-arrowright"></i>
      </div>
      
      <textarea class="address_detail" rows="6" placeholder="请填写详细地址，不少于5个字" v-model="content"></textarea>

      <div class="address_default flex">
        <p>设为默认地址</p>
        <div v-bind:class="[isOpen == '1'? 'switch_out_left switch_out' : 'switch_out_right switch_out']">
          <div v-bind:class="[isOpen == '0'? 'left switcher' : 'right switcher']" v-on:click="switcher"></div>
        </div>      
      </div>

      <button class="address_btn" @click="address_new">保存</button>      
    </div>

    <div class="address_bg" v-show="showMap" @click="closeMap"></div>
    <div id="container" v-show="showMap">
      <iframe id="mapPage" width="100%" height="100%" frameborder=0 src="https://apis.map.qq.com/tools/locpicker?search=1&type=1&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77&referer=myapp"></iframe>
      <!-- <button class="address_sure" @click="address_sure">确定</button> -->
    </div>
  </div>
</template>

<script>
// import TMap from '../../../utils/TMap'
import wx from 'weixin-js-sdk'
import axios from 'axios'
import global from '../../../utils/global'
import store from '../../../utils/store'
let Base64 = require('js-base64').Base64;
export default {
  name: "address_add",
  data () {
    return {
      name: '',
      phone: '',
      address: '请选择地址',
      content: '',
      isOpen: 0,  // 判断是否是默认地址
      detail: [], // 微信jssdk
      jssdk: {}, //jssdk中config的信息
      loc: {  // 经纬度
        lat: '',
        lng: '',
      },
      location: {},
      siteId:'',  //地址id   增加无此ID/修改有
      // 下面的是地图
      showMap: false,
      zoom: 18,
      // 下面的是地址信息
      info: {},
    }
  },
  beforeMount(){
    console.log(this.$route.params);
    if (this.$route.params.id) {
      this.name = this.$route.params.id.user_name;
      this.phone = this.$route.params.id.user_mobile;
      this.address = this.$route.params.id.addr;
      this.content = this.$route.params.id.addr_detail;
      this.isOpen = this.$route.params.id.is_default;
      this.loc.lat = this.$route.params.id.latitude;
      this.loc.lng = this.$route.params.id.longitude;
      this.siteId = this.$route.params.id.id;
    }
    // console.log(this.isOpen);
  },
  mounted() {
    this.getJssdk();
    // this.wxGetLocation();
    // this.mapCenter();
    this.map();
    this.getInfo();
    this.$root.share();
  },
  methods: {
    switcher(){
      // this.isOpen = !this.isOpen
      var that = this;
      if (that.isOpen == '0') {
        that.isOpen = '1'
      } else {
        that.isOpen = '0'
      }
      console.log(that.isOpen);
    },
    address_new(){    //保存
      // this.$router.push({path:'/'})
      var that = this;
      var uuid = localStorage.getItem('carWashUuid');
      var id = that.siteId;
      var user_name = that.name;
      var user_mobile = that.phone;
      var addr = that.address;
      var addr_detail = that.content;
      var longitude;
      var latitude;
      var isOpen = that.isOpen;
      console.log(that.loc);
      if (that.loc == '' || that.loc == null || that.loc == undefined) {
        console.log("没有选择地图位置!");
      } else {
        longitude = that.loc.lng;
        latitude = that.loc.lat;        
      }
      // console.log(uuid);
      // console.log(id);
      // console.log(user_name);
      // console.log(addr);
      // console.log(addr_detail);
      // console.log(user_mobile);
      // console.log(longitude);
      // console.log(latitude);
      // console.log(isOpen);
      if (user_name == '' || user_name == null) {
        alert("请输入姓名！");
      } else if (user_mobile == '' || user_mobile == null) {
        alert("请输入手机号！");
      } else if (addr == '' || addr == null) {
        alert("请选择你的位置！");
      } else if (addr_detail == '' || addr_detail == null) {
        alert("请输入你的详细位置！");
      } else if (id) {
        that.getChange(uuid,id,user_name,addr,addr_detail,user_mobile,longitude,latitude,isOpen);
      } else {
        that.getNew(uuid,user_name,addr,addr_detail,user_mobile,longitude,latitude,isOpen);
      }      
    },
    // 新增 与 修改
    getNew(uid,name,addr,addr_detail,mobile,lng,lat,isOpen){
      console.log("新增");
      var that = this;
      axios.get(global.api.address.change,{
        params: {
          uuid: uid,
          user_name: name,
          addr: addr,
          addr_detail: addr_detail,
          user_mobile: mobile,
          longitude: lng,
          latitude: lat,
          is_default: isOpen,
        }
      })
      .then(function(res){
        console.log("then");
        console.log(res);
        if (res.data.data.code == 'success') {
          // that.$router.push({path:'/addressmanage'})
          that.$router.go(-1)
        }
      })
      .catch(function(res){
        console.log("catch");
        console.log(res);
      })
    },
    getChange(uid,id,name,addr,addr_detail,mobile,lng,lat,isOpen){
      console.log("修改");
      var that = this;
      axios.get(global.api.address.change,{
        params: {
          uuid: uid,
          id: id,
          user_name: name,
          addr: addr,
          addr_detail: addr_detail,
          user_mobile: mobile,
          longitude: lng,
          latitude: lat,
          is_default: isOpen,
        }
      })
      .then(function(res){
        console.log("then");
        console.log(res);
        if (res.data.data.code == 'success') {
          // that.$router.push({path:'/addressmanage'})
          that.$router.go(-1)
        }
      })
      .catch(function(res){
        console.log("catch");
        console.log(res);
      })
    },
    // 获取jssdk
    getJssdk(){
      var that = this;
      // var pathUrl = that.$route.path;
      var pathUrl = window.location.href;
      console.log(pathUrl);
      pathUrl = Base64.encode(pathUrl);
      console.log(pathUrl);
      axios.get(global.api.user.jssdk,{
        params: {
          url: pathUrl,
        }
      })
      .then(function(res){
        console.log("getJssdk then");
        console.log(res);
        that.jssdk = res.data.content;
      })
      .catch(function(res){
        console.log("getJssdk catch");
        console.log(res);
      })
    },
    map(){
      var that = this;
      window.addEventListener('message', function(event) {
        // 接收位置信息，用户选择确认位置点后选点组件会触发该事件，回传用户的位置信息
        var loc = event.data;
        if (loc && loc.module == 'locationPicker') {//防止其他应用也会向该页面post信息，需判断module是否为'locationPicker'
          console.log('location');
          console.log(loc);
          that.location = loc;
          that.loc = loc.latlng;
          that.address = loc.poiaddress;
          that.showMap = false;
        }
      }, false);
    },
    openMap(){
      this.showMap = true;
    },
    closeMap(){
      this.showMap = false;
    },
    // 获取地址信息
    getInfo(){
      console.log(sessionStorage.getItem('carWashUuid'));
      var that = this;
      axios.get(global.api.address.myAddress,{
        params: {
          uuid: localStorage.getItem('carWashUuid'),
        }
      })
      .then(function(res){
        console.log("获取地址信息 then");
        console.log(res);
        var info = res.data.data;
        var length = res.data.data.length;
        for (var i=0;i<length;i++) {
          if (res.data.data[i].is_default == 1) {
            that.name = res.data.data[i].user_name;
            that.phone = res.data.data[i].user_mobile;
          }
        }
      })
      .catch(function(res){
        console.log("获取地址信息 catch");
        console.log(res);
      })
    },
  },
}
</script>
  
<style scoped>
  input{
    border: none;
   
    flex: 1;
    background-color: #fff;
    font-size: 0.9rem;
    /*font-size: 1rem;*/
  }
  input:focus{
    outline-offset: 0px;
    outline: -webkit-focus-ring-color auto 0px;
  }
  .address_add{
    width: 100%;
    position: relative;
  }
  .address_cnt{
    width: 92%;
    margin: 0 4%;    
  }
  .address_top{
    justify-content: space-between;
    align-items: center;
    line-height: 3rem;
    border-bottom: 1px solid #B3B3B4;
  }
  .address_top p {
    font-size: 1rem;
  }
  .address_left{
    justify-content: flex-start;
    align-items: center;
  }
  .address_left input{
    /*font-size: 0.9rem;*/
  }
  .address_left .address_main{
    line-height: 1rem;
    font-size: 0.9rem;
    flex: 1;
    padding: 0.75rem 0;
    color: rgba(0,0,0,0.7);
    text-align: left;
  }
  .address_detail{
    width: 94%;
    border: none;
    margin-top: 2rem;
    padding: 1rem 3%;
    background-color: #F3F3F3;
    font-size: 0.95rem;
  }
  .address_detail:focus{
    outline-offset: 0px;
    outline: -webkit-focus-ring-color auto 0px;
  }
  .address_default{
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #B3B3B4;
    padding: 2rem 0 1rem;
  }
  /*按钮*/
  .switch_out{
    width: 3rem;
    height: 1.5rem;
    border: 1px solid #2ecc80;
    border-radius: 0.9rem;
    transition: background-color 0.6s;
    position: relative;
  }
  .switch_out_left{
    background-color: #2ecc80;
  }
  .switch_out_right{
    background-color: #fff;
  }
  .switcher {
    width: 1.45rem;
    height: 1.45rem;
    border-radius: 50%;
    background-color: #fff;
    transition: left 0.6s;
    position: absolute;
    top: 0;
    box-shadow: 0px 0px 2px 1px #2ecc80;
  }
  .left {
    left: 0;
  }

  .right {
    left: 1.5rem;
  }
  /*保存*/
  .address_btn{
    width: 8rem;
    height: 2.5rem;
    line-height: 2.5rem;
    background-color: #2ecc80;
    color: #fff;
    font-size: 1rem;
    border: none;
    border-radius: 5px;
    margin: 2rem 0 1rem;
  }
  /* 地图 */
  .address_bg{
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.3);
    position: fixed;
    z-index: 999;
    /*z-index: 1001;*/
    top: 0;
    left: 0;
  }
  #container {
    width: 100%;
    height: 100%;
    position: fixed !important;
    z-index: 1000;
    top: 0%;
    left: 0;
    /*margin-top: -300px;*/
  }
  .address_sure{
    /*width: 100%;*/
    background-color: #fff;
    border: 1px solid #B3B3B4;
    font-size: 1rem;
    /*height: 3rem;*/
    /*line-height: 3rem;*/
    width: 3rem;
    height: 6rem;
    line-height: 6rem;
    position: fixed;
    bottom: 0;
    right: 0;
    z-index: 1001;
  }
</style> 
<style>
  ul,li,div,a,p,span{
    margin: 0;
    padding: 0;
  }
  li{
    list-style: none;
  }
  .flex{
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
  }
</style>
